導(dǎo)讀:使用全局變量 在初始化代碼的時(shí)候,小程序會(huì)讀取一個(gè)app.js的文件,在這里我們可以定義我們所需要的全局變量。});//page.js ...var app = getApp()var getFoo = app.globalData
發(fā)表日期:2019-10-20
文章編輯:興田科技
瀏覽次數(shù):9212
標(biāo)簽:
在微信小程序的開發(fā)中,我們會(huì)經(jīng)常遇到頁面間數(shù)據(jù)傳遞或者相互影響的問題。在實(shí)際的開發(fā)過程中,可以通過以下幾種方法來實(shí)現(xiàn)。
使用全局變量
全局變量實(shí)際上是定義了一個(gè)全局的對(duì)象,并在每個(gè)頁面中引入。
在初始化代碼的時(shí)候,小程序會(huì)讀取一個(gè)app.js的文件,在這里我們可以定義我們所需要的全局變量。
//app.js ...App({globalData: {foo:'bar' }
});
然后在頁面中,可以通過getApp()方法獲取到全局應(yīng)用對(duì)象,可以對(duì)全局變量進(jìn)行讀取并更改:
//page.js ...var app = getApp()var getFoo = app.globalData.foo app.globalData.foo ='fun'
由于app.js在項(xiàng)目中是用來做基礎(chǔ)配置的,因此不建議將很多變量放在這里配置。一般情況下會(huì)將一些持久化的常量配置在這里,對(duì)于經(jīng)常需要變動(dòng)的量不建議用這個(gè)方法。
使用本地緩存
本地緩存是微信小程序提供的一個(gè)功能,可以將用戶產(chǎn)生的數(shù)據(jù)做本地的持久化,類似于 NoSQL,可以進(jìn)行讀取和修改的操作。
那么在不同的頁面之間,如何利用它,進(jìn)行數(shù)據(jù)的交互呢?
假設(shè)我們?cè)?A 頁面保存了用戶的信息。
// pageA.js...var developer = {
name:'raymond',
gender:'male' }
wx.setStorageSync('developer', developer);
這樣做,這個(gè)數(shù)據(jù)就存在了本地。當(dāng)在 B 頁面需要使用的時(shí)候,可以直接的獲取到數(shù)據(jù)池中的數(shù)據(jù),并進(jìn)行 CRUD 操作:
//pageB.js ...// Retrievevar developer = (wx.getStorageSync('developer') || [])// Update developer.name ='Jiayang' wx.setStorageSync('developer', developer);// Delete wx.removeStorage({
key:'developer' })
需要注意的是,在回到 A 頁面的時(shí)候,小程序需要重新讀取數(shù)據(jù)。這時(shí)候,可以選擇放在生命周期的onShow中對(duì)數(shù)據(jù)重新加載
父級(jí)往子級(jí)頁面(模板)的數(shù)據(jù)傳遞
我們通常會(huì)在頁面之間進(jìn)行跳轉(zhuǎn)、重定向的操作。這時(shí)候,我們可以選擇將部分?jǐn)?shù)據(jù)放在url里面,并在新頁面onLoad的時(shí)候進(jìn)行初始化。
pageC.js ...// Navigatewx.navigateTo({url:'../pageD/pageD?name=raymond&gender=male',
})// Redirectwx.redirectTo({url:'../pageD/pageD?name=raymond&gender=male',
})
在 D 頁面中,我們可以這樣接收到到所傳進(jìn)來的參數(shù):
// pageD.js ...
page({
onl oad: function(option){
console.log(option.name +'is' +option.gender)
this.setData({option:option })
}
})
wx.navigateTo和wx.redirectTo不允許跳轉(zhuǎn)到 tab 所包含的頁面,只能用wx.switchTab跳轉(zhuǎn)。需要注意的是,wx.switchTab中的url不能傳參數(shù)。
微信新提供的wx.reLaunch接口可以傳入?yún)?shù)。
另外,在頁面中我們通常會(huì)用到一些組件模板,因此在父子之間也會(huì)有相應(yīng)的數(shù)據(jù)傳遞。
使用name屬性,作為模板的名字。然后在這里面使用is屬性,聲明需要的使用的模板。
{{index}}: {{msg}}Time: {{time}}
然后將模板所需要的data傳入,如:
<templateis="msgItem"data="{{...item}}"/>
page({data: {item: {index:0,msg:'this is a template',time:'2016-09-15' }
}
})
傳入模板的除了變量,還可以是事件方法對(duì)象。例如,模板中的點(diǎn)擊事件,可以傳遞到使用模板的元素中。
通過獲取到頁面對(duì)象進(jìn)行數(shù)據(jù)操作
這個(gè)方法的精髓,是通過獲取到其他頁面的對(duì)象原型,然后通過原型方法setData對(duì)當(dāng)前對(duì)象管理的data進(jìn)行修改,示例如下:
//pageE.js ...page({data: {index:1 }
})
當(dāng)跳轉(zhuǎn)到下一個(gè)頁面 F 之后,假定在 F 中有操作需要對(duì) E 中的數(shù)據(jù)有修改,則可以使用以下方法:
pageF.js
...
page({
changeIndexInE:function(){var pages = getCurrentpages();var prevpage = pages[pages.length -2];
prevpage.setData({
index:0 })
}
})
這個(gè)方法可以操作頁面堆棧里面的頁面的數(shù)據(jù),可以做到讓后一級(jí)頁面對(duì)上級(jí)頁面群的數(shù)據(jù)管理。
小結(jié)
在微信小程序中有以上并且不局限于以上幾種的方式進(jìn)行頁面間數(shù)據(jù)傳遞、交互,在實(shí)際應(yīng)用中可以組合使用。比如說:
●一些常量,可以交由app.js管理;需要持久化的量可以放在本地保存。
●涉及到下級(jí)頁面或者模板元素的數(shù)據(jù),可以通過傳入?yún)?shù)的方式傳入。
●后級(jí)頁面可以通過獲取堆棧里的頁面對(duì)象快速修改上級(jí)的數(shù)據(jù)。
在實(shí)際應(yīng)用中結(jié)合使用,可以更好地管理小程序的數(shù)據(jù)。
本文如有不周到之處,可以留言進(jìn)行討論。
更多新聞
2023
內(nèi)蒙古網(wǎng)站建設(shè)公司提供網(wǎng)站設(shè)計(jì)和開發(fā)服務(wù)。他們會(huì)根據(jù)您的品牌形象和目標(biāo)受眾的需求創(chuàng)建一個(gè)獨(dú)特而具有吸引力的網(wǎng)站。他們還將確保您的網(wǎng)站具有良好的用戶體驗(yàn)和頁面加載速度。
View details
2023
網(wǎng)站建設(shè)不僅僅是設(shè)計(jì)和開發(fā),還需要優(yōu)化以提升在搜索引擎中的排名。一個(gè)好的網(wǎng)站建設(shè)公司應(yīng)該具備SEO優(yōu)化的能力,以幫助您的網(wǎng)站獲得更多的流量和曝光。
View details
2023
在開始網(wǎng)站建設(shè)之前,我們會(huì)與客戶進(jìn)行充分的溝通和交流,了解客戶的需求和期望,確定目標(biāo)受眾和功能需求,為后續(xù)的設(shè)計(jì)和開發(fā)工作打下基礎(chǔ)。
View details
2020
這幾年,由于互聯(lián)網(wǎng)的迅猛發(fā)展,很多人短短時(shí)間就“一夜暴富”,不管是做某銷的,還是N級(jí)分銷的,最終多數(shù)商品還是壓到了最底層的“創(chuàng)業(yè)者手里”,可謂是“一將功成萬骨枯“。從微商的
View details